<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D1aKBWDNap6FnXHZgI5MY7OthZFbbnOl"></script>

    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap {height:500px; width: 100%;}
        #control{width:100%;}
    </style>
</head>

<body>
<!--百度地图容器-->
<div style="width: 100%;height: 600px;border:#ccc solid 1px;font-size:12px" id="map"></div>


<div id="allmap"></div>
<div id="allmap2"></div>
<div id="control">
    <button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button>
    <button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button>
</div>



</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(126.205196,30.212101),6);
    }
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(){
        var markers = [
            {content:"船运",title:"青岛港",imageOffset: {width:0,height:-21},position:{lat:36.194672,lng:120.671075}},
            {content:"船运",title:"大连港",imageOffset: {width:0,height:-21},position:{lat:39.06561,lng:121.641532}},
            {content:"船运",title:"广东港",imageOffset: {width:0,height:-21},position:{lat:23.796133,lng:115.404849}},
            {content:"空运",title:"北京机场",imageOffset: {width:-46,height:-46},position:{lat:40.739914,lng:116.989462}},
            {content:"空运",title:"重庆机场",imageOffset: {width:0,height:-46},position:{lat:29.787228,lng:106.419882}},
            {content:"空运",title:"东京机场",imageOffset: {width:-115,height:-46},position:{lat:35.796466,lng:139.649425}},
            {content:"船运",title:"长崎",imageOffset: {width:-23,height:-21},position:{lat:32.909305,lng:129.94945}}
        ];
        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                    imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        };
        var labels = [
        ];
        for(var index = 0; index < labels.length; index++){
            var opt = { position: new BMap.Point(labels[index].position.lng,labels[index].position.lat )};
            var label = new BMap.Label(labels[index].content,opt);
            map.addOverlay(label);
        };
        var plOpts = [
        ];
        var plPath = [
        ];
        for(var index = 0; index < plOpts.length; index++){
            var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
            map.addOverlay(polyline);
        }
    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_METRIC);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:0});
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
        map.addControl(overviewControl);
    }
    var map;
    initMap();

</script>

<script  async type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap2");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
    map.enableScrollWheelZoom();

    var polyline = new BMap.Polyline([
        new BMap.Point(120.671292,36.146457),
        //new BMap.Point(116.405, 39.920),
        new BMap.Point(129.879139,32.764113)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线
    map.addOverlay(polyline);   //增加折线

</script>


<script async type="text/javascript">
    var list = [{Long:120.671075,Lat:36.194672},{Long:106.652024,Lat:26.614221},{Long:106.654024,Lat:26.612221},{Long:106.657024,Lat:26.612221}];
    var listLast = list.length-1;
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 15);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

    function drawGreenLine(i){
        var polyline = new BMap.Polyline([
            new BMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度
            new BMap.Point(list[i+1].Long,list[i+1].Lat)//终点的经纬度
        ], {strokeColor:"green",//设置颜色
            strokeWeight:4, //宽度
            strokeOpacity:2});//透明度
        map.addOverlay(polyline);
    }

    function drawIcon() {
        if (carMk) {
            map.removeOverlay(carMk);
        }
        carMk2 = new BMap.Marker(
            new BMap.Point(list[0].Long, list[0].Lat),//起始点的经纬度
            {icon: myBeginIcon});
        map.addOverlay(carMk2);

        carMk = new BMap.Marker(
            new BMap.Point(list[listLast].Long, list[listLast].Lat),//终点的经纬度
            {icon: myEndIcon});
        map.addOverlay(carMk);

        for (var i = 0; i < list.length - 1; i++) {
            drawGreenLine(i);
        }
    }

</script>


</html>